import { forwardRef, useMemo, Ref } from 'react';
import { Icon } from '@iconify/react';

interface SvgIconProps {
  icon?: string;
  localIcon?: string;
  className?: string;
}

const SvgIcon = forwardRef<SVGSVGElement | HTMLElement, SvgIconProps>((props, ref) => {
  const { icon, localIcon, className, ...otherProps } = props;

  const prefix = import.meta.env.VITE_ICON_LOCAL_PREFIX || 'local-icon';
  const defaultLocalIcon = 'no-icon';

  const symbolId = useMemo(() => {
    const iconToUse = localIcon || defaultLocalIcon;
    return `#${prefix}-${iconToUse}`;
  }, [localIcon, prefix]);

  const renderLocalIcon = useMemo(() => localIcon || !icon, [localIcon, icon]);

  return (
    <>
      {renderLocalIcon ? (
        <svg aria-hidden="true" width="1em" height="1em" {...otherProps} className={className} ref={ref as Ref<SVGSVGElement>}>
          <use xlinkHref={symbolId} fill="currentColor" />
        </svg>
      ) : (
        icon && <Icon icon={icon} {...otherProps} className={className} ref={ref as any} />
      )}
    </>
  );
});

export { SvgIcon };



